<template>
  <!-- 一条文章单元格 -->
  <!-- 阻止冒泡事件不让子元素向父元素向父元素传递 -->
  <van-cell @click="$router.push(`/article/?art_id=${isObj.art_id}`)">
    <!-- 标题区域的插槽 -->
    <template #title>
      <div class="title-box">
        <!-- 标题 -->
        <span>{{isObj.title}}</span>
         <!-- 根据每一条数据中的type值来判断展示图片哈 只需要将图片的src 替换成layz -->
          <img class="thumb" v-lazy="isObj.cover.images[0]" alt="图片" v-if="isObj.cover.type === 1">
      </div>
      <!--  多图展示 -->
       <div class="thumb-box"  v-if="isObj.cover.type > 1">
          <img   class="thumb" v-lazy="obj" alt="" v-for="(obj,index) in isObj.cover.images" :key="index"/>
        </div>
    </template>
    <!-- label 区域的插槽 -->
    <template #label>
      <div class="label-box">
        <div>
          <span>作者:{{isObj.aut_name}}</span>
          <span>{{isObj.comm_count}}12321评论</span>
          <span>发布日期{{$timeAgo(isObj.pubdate)}}</span>
        </div>
        <!-- 反馈按钮 -->
        <van-icon name="cross" @click.stop="showSheet" v-if="showClooss"/>
        <!-- 面板反馈哈 -->
          <van-action-sheet
  v-model="show"
  :actions="FIRST_ACTIONS"
  cancel-text="取消"
  get-container="body"
 @select="onSelectFn"
/>
<!-- 二级面板 -->
<van-action-sheet
  v-model="show1"
  :actions="SECOND_ACTIONS"
  cancel-text="取消"
  get-container="body"
 @select="onSelectFn"
/>
      </div>
    </template>
  </van-cell>
</template>

<script>
// 导入模拟的数据
import { FIRST_ACTIONS, SECOND_ACTIONS } from '@/constant'
// 删除后台 不喜欢得数据
import { ArticlesItemApi, ArticlesItemPostApi } from '@/api/home'
export default {
  name: 'ArtcileItem',
  props: {
    isObj: {
      type: Object,
      required: true
    },
    // 在搜素结果列表中不需要展示x
    showClooss: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      show: false,
      show1: false,
      FIRST_ACTIONS,
      SECOND_ACTIONS
    }
  },
  methods: {
    async onSelectFn ({ id }) {
      // action绑定的数据对象
      if (id === 11) {
        // 使用promis异步函数
        await ArticlesItemApi({ articleId: this.isObj.art_id })
        // 顺便还要删除在页面当中的就需要派发事件 交给父组件来操作
        this.$emit('disLike')
        // 记住代码是从上往下执行的哈 没删除一次就将当前面板关闭
        this.show = false
      } else if (id === 22) { // 选择的是反馈垃圾内容
        // 证明点击的是反馈垃圾内容
        this.show1 = true
      } else {
        await ArticlesItemPostApi({
          target: this.isObj.art_id,
          type: id,
          remark: '其它问题哈'
        })
        this.$toast('小伙子举报成功哈')
        //  举报成功关闭俩个面板噶
        this.show = this.show1 = false
      }
    },
    // 点击显示面板
    showSheet () {
      this.show = true
    }
  }
}
</script>

<style scoped lang="less">
/* 标题样式 */
.title-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* label描述样式 */
.label-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 文章信息span */
.label-box span{
  margin: 0 3px;
  &:first-child{
    margin-left: 0;
  }
}
/* 图片的样式, 矩形黄金比例：0.618 */
.thumb {
  width: 113px;
  height: 70px;
  background-color: #f8f8f8;
  object-fit: cover;
}

/* 三图, 图片容器 */
.thumb-box {
  display: flex;
  justify-content: space-between;
}
</style>
